<template>
  <div class="compute_time_wrapper">
    <span class="time" @click="gotoPay">{{remaining}}</span>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'ComputeTime',
  data () {
    return {
      countNum: 900
    }
  },
  mounted () {
    this.countNum -= this.numTime
    this.remainingTime()
  },
  props: ['time'],
  computed: {
    // 时间转换
    remaining () {
      let minute = parseInt(this.countNum / 60)
      let second = parseInt(this.countNum % 60)
      if (minute < 10) {
        minute = '0' + minute
      }
      if (second < 10) {
        second = '0' + second
      }
      return '去支付(还剩' + minute + '分' + second + '秒)'
    },
    // 订单返回时间秒分分别处理
    numTime () {
      if (this.time.toString().indexOf('分钟') !== -1) {
        return parseInt(this.time) * 60
      } else {
        return parseInt(this.time)
      }
    }
  },
  methods: {
    // 倒计时
    remainingTime () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.countNum--
        if (this.countNum === 0) {
          clearInterval(this.timer)
          Dialog({
            width: '70%',
            message: '支付超时'
          })
        }
      }, 1000)
    },
    gotoPay () {
      Dialog({
        width: '70%',
        message: '暂不开放支付接口'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .time
    color: orange
    padding: .05rem .1rem
    border: 1px solid orange
</style>
